<script setup lang="ts">
  import { ref, watch, defineEmits } from 'vue';
  import { useBooleanStore } from '@/store';
  import TopInput from './components/top-input.vue';
  import TopTable from './components/top-table.vue';

  const booleanStore = useBooleanStore();
  const loading = ref<boolean>(false);
  const emit = defineEmits(['updateTableData']);
  const tableData = ref('');
  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
    },
    { deep: true }
  );
  watch(
    () => booleanStore.boolValue,
    (value) => {
      loading.value = value;
    }
  );
</script>

<template>
  <keep-alive>
    <div class="flow-query">
      <a-card>
        <template #title>
          <div class="card-title">扫码移交</div>
        </template>
        <div class="content">
          <a-spin dot :loading="loading" tip="移交中...">
            <TopInput @update-array="tableData = $event" />
            <TopTable :table-data="tableData" />
          </a-spin>
        </div>
      </a-card>
    </div>
  </keep-alive>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
